
<template>
    <div>
        <mt-header fixed title="个体经营范围" style="z-index: 999999;">
      <span slot="left" @click="goBack">
        <mt-button icon="back" slot="left">返回</mt-button>
      </span>
      <!-- <mt-button v-if="reportedByOther=='1' || information=='业户'" icon slot="right" @click.native="insertDate">新增</mt-button> -->
      <mt-button icon slot="right" @click.native="choseInfo">确定</mt-button>
    </mt-header>
        <div class="wrapper">
            <ul class="item_wrapper" style="margin-left:10px">
                <li class="item_first" v-for="(item,index) in jobList" :key="item.id" >

                    <input  type="checkbox" name="school"
                                           :id="'check'+item.id"
                                           v-model="selectPeople"
                                           :value="item" style="margin-top:10px;" >

                    <div @click="checkItem(index)" class="item" style="font-weight: 700;display: inline-block;">
                        <div class="checkGroup" @click="checkAll(index)" @click.stop>
                            <i class="iconfont"
                               :class="{'icon-gouxuan':isSelectAll[index] && isSelectAll[index].group,'icon-checkboxround0':isSelectAll[index] && !isSelectAll[index].group}"></i>
                        </div>
                        {{item.name}}
                    </div>
                    <ul class="item_second" v-show="isOpenItem[index] && isOpenItem[index].group" style="margin-left:15px">
                        <div class="item_third" v-for="(second,j) in item.son" :key="second.id">

                            <input  type="checkbox" name="school"
                                           :id="'check'+second.id"
                                           v-model="selectPeople"
                                           :value="second" style="margin-top:10px;">

                            <div @click="checkSecondItem(index, j)" class="item" style="display: inline-block;">

                                

                                <div class="checkGroup" @click="checkSecondAll(index, j)" @click.stop>
                                    <i class="iconfont"
                                       :class="{'icon-gouxuan':isSelectAll[index] && isSelectAll[index].child[j],'icon-checkboxround0':isSelectAll[index] && !isSelectAll[index].child[j]}"></i>
                                </div>
                                {{second.name}}
                            </div>
                            <ul class="item_fourth" v-show="isOpenItem[index] && isOpenItem[index].child[j]" style="margin-left:25px">
                                <li v-for="(third,k) in second.member" :key="third.id" style="display: block;height:40px">
                                    <input @click="stateChanged(index, j, k)" type="checkbox" name="school"
                                           :id="'check'+third.id"
                                           v-model="selectPeople"
                                           :value="third" style="margin-top:10px;">
                                    <label class="content-wrap" :for="'check'+third.id" style="display: inline-block;height:40px;line-height:40px">
                                        <div class="item_img" :style="{ background: third.headColor }">{{ third.name }}</div>
                                        <div class="content">
                                            <!-- <p class="content_name">
                                                {{third.userName}}
                                            </p> -->
                                            <!-- <p class="vice">{{ third.job }}</p> -->
                                        </div>
                                    </label>
                                </li>
                            </ul>
                        </div>
                        <li v-for="(people,i) in item.member" :key="people.id" style="margin-left:20px;display: block;height:40px">
                            <input @click="stateChanged(index,i)" type="checkbox" name="school" :id="'check'+people.id"
                                   v-model="selectPeople"
                                   :value="people" style="margin-top:10px;">
                            <label class="content-wrap" :for="'check'+people.id" style="display: inline-block;height:40px;line-height:40px">
                                <div class="item_img" :style="{ background: people.headColor }">{{ people.name }}</div>
                                <div class="content">
                                    <!-- <p class="content_name">
                                        {{people.userName}}
                                    </p> -->
                                    <!-- <p class="vice">{{ people.job }}</p> -->
                                </div>
                            </label>
                        </li>
                     </ul> 
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import { Toast } from "mint-ui";
    export default {
        name: "demo",
        data() {
            return {
                headColor: ['#1c71fb', '#f7aa47', '#00c182', '#ff6769', '#917ee6', '#2cb2eb'],//待选颜色
                //个体经营范围数据源
      jobList: [{
            "id": "02000",
            "name": "道路普通货运",
            "son": [{
                "id": "02100",
                "name": "道路普通货物运输",
                "member": [{"id": "02101", "userName": "", "job": "", "name": "道路普通货物运输"}]
            },{
                "id": "02200",
                "name": "货物专用运输",
                "member": [{"id": "02201", "userName": "", "job": "", "name": "货物专用运输（集装箱）"},
                        {"id": "02202", "userName": "", "job": "", "name": "货物专用运输（冷藏保鲜设备）"},
                        {"id": "02203", "userName": "", "job": "", "name": "货物专用运输（罐式容器）"}]
            },{
                "id": "02300",
                "name": "大型物件运输",
                "member": [{"id": "02301", "userName": "", "job": "", "name": "大型物件运输（一类）"},
                        {"id": "02302", "userName": "", "job": "", "name": "大型物件运输（二类）"},
                        {"id": "02303", "userName": "", "job": "", "name": "大型物件运输（三类）"},
                        {"id": "02304", "userName": "", "job": "", "name": "大型物件运输（四类）"}]
            }]
        },{
            "id": "03000",
            "name": "道路危险货物运输",
            "son": [{
                "id": "03100",
                "name": "经营性道路危险货物运输",
                "member": [{"id": "03111", "userName": "", "job": "", "name": "危险货物运输（1类1项）"},
                {"id": "03112", "userName": "", "job": "", "name": "危险货物运输（1类2项）"},
                {"id": "03113", "userName": "", "job": "", "name": "危险货物运输（1类3项）"},
                {"id": "03114", "userName": "", "job": "", "name": "危险货物运输（1类4项）"},
                {"id": "03115", "userName": "", "job": "", "name": "危险货物运输（1类5项）"},
                {"id": "03116", "userName": "", "job": "", "name": "危险货物运输（1类6项）"},
                {"id": "03121", "userName": "", "job": "", "name": "危险货物运输（2类1项）"},
                {"id": "03122", "userName": "", "job": "", "name": "危险货物运输（2类2项）"},
                {"id": "03123", "userName": "", "job": "", "name": "危险货物运输（2类3项）"},
                {"id": "03131", "userName": "", "job": "", "name": "危险货物运输（3类）"},
                {"id": "03141", "userName": "", "job": "", "name": "危险货物运输（4类1项）"},
                {"id": "03142", "userName": "", "job": "", "name": "危险货物运输（4类2项）"},
                {"id": "03143", "userName": "", "job": "", "name": "危险货物运输（4类3项）"},
                {"id": "03151", "userName": "", "job": "", "name": "危险货物运输（5类1项）"},
                {"id": "03152", "userName": "", "job": "", "name": "危险货物运输（5类2项）"},
                {"id": "03161", "userName": "", "job": "", "name": "危险货物运输（6类1项）"},
                {"id": "03162", "userName": "", "job": "", "name": "危险货物运输（6类2项）"},
                {"id": "03181", "userName": "", "job": "", "name": "危险货物运输（8类）"},
                {"id": "03191", "userName": "", "job": "", "name": "危险货物运输（9类）"},
                {"id": "03195", "userName": "", "job": "", "name": "剧毒化学品"},
                {"id": "03196", "userName": "", "job": "", "name": "医疗废物"},
                {"id": "03197", "userName": "", "job": "", "name": "危险废物"}]
            },{
                "id": "03200",
                "name": "非经营性危险货物运输",
                "member": [{"id": "03211", "userName": "", "job": "", "name": "危险货物运输（1类1项）"},
                {"id": "03212", "userName": "", "job": "", "name": "危险货物运输（1类2项）"},
                {"id": "03213", "userName": "", "job": "", "name": "危险货物运输（1类3项）"},
                {"id": "03214", "userName": "", "job": "", "name": "危险货物运输（1类4项）"},
                {"id": "03215", "userName": "", "job": "", "name": "危险货物运输（1类5项）"},
                {"id": "03216", "userName": "", "job": "", "name": "危险货物运输（1类6项）"},
                {"id": "03221", "userName": "", "job": "", "name": "危险货物运输（2类1项）"},
                {"id": "03222", "userName": "", "job": "", "name": "危险货物运输（2类2项）"},
                {"id": "03223", "userName": "", "job": "", "name": "危险货物运输（2类3项）"},
                {"id": "03231", "userName": "", "job": "", "name": "危险货物运输（3类）"},
                {"id": "03241", "userName": "", "job": "", "name": "危险货物运输（4类1项）"},
                {"id": "03242", "userName": "", "job": "", "name": "危险货物运输（4类2项）"},
                {"id": "03243", "userName": "", "job": "", "name": "危险货物运输（4类3项）"},
                {"id": "03251", "userName": "", "job": "", "name": "危险货物运输（5类1项）"},
                {"id": "03252", "userName": "", "job": "", "name": "危险货物运输（5类2项）"},
                {"id": "03261", "userName": "", "job": "", "name": "危险货物运输（6类1项）"},
                {"id": "03262", "userName": "", "job": "", "name": "危险货物运输（6类2项）"},
                {"id": "03281", "userName": "", "job": "", "name": "危险货物运输（8类）"},
                {"id": "03291", "userName": "", "job": "", "name": "危险货物运输（9类）"},
                {"id": "03295", "userName": "", "job": "", "name": "剧毒化学品"},
                {"id": "03296", "userName": "", "job": "", "name": "医疗废物"},
                {"id": "03297", "userName": "", "job": "", "name": "危险废物"}]
            }]
        },{
                "id": "07200",
                "name": "国际道路货物运输",
                "member": [{"id": "07201", "userName": "", "job": "", "name": "国际道路货物运输"},
                        {"id": "07202", "userName": "", "job": "", "name": "国际道路危险货物运输"},
                ]
            },{
            "id": "11000",
            "name": "道路放射性货物运输",
            "son": [{
                "id": "11100",
                "name": "经营性道路放射性货物运输",
                "member": [{"id": "11101", "userName": "", "job": "", "name": "放射性货物运输（1类）"},
                        {"id": "11102", "userName": "", "job": "", "name": "放射性货物运输（2类）"},
                        {"id": "11103", "userName": "", "job": "", "name": "放射性货物运输（3类）"}]
            },{
                "id": "11200",
                "name": "非经营性放射性货物运输",
                "member": [{"id": "11201", "userName": "", "job": "", "name": "放射性货物运输（1类）"},
                        {"id": "11202", "userName": "", "job": "", "name": "放射性货物运输（2类）"},
                        {"id": "11203", "userName": "", "job": "", "name": "放射性货物运输（3类）"}]
            }]
        }], 
        selectPeople: [],//存储被选择的
        isOpenItem: [],//控制每级面板的打开与折叠
        isSelectAll: [],//控制每级面板的选中状态
            }
        },
        watch: {
            selectPeople(newVal){
                console.log("选择内容：" + JSON.stringify(newVal));
            }
        },
        mounted() {
            this.initData();//数据初始化
        },
        methods: {
            choseInfo(){
                //console.log(JSON.stringify(this.selectPeople));
                if(this.selectPeople.length > 0){
                    let str = "";
                    let code = "";
                    for(let i=0;i<this.selectPeople.length;i++){
                        if(i==0){
                            str+=this.selectPeople[i].name;
                            code+=this.selectPeople[i].id;
                        } else {
                            str+=";"+this.selectPeople[i].name;
                            code+=";"+this.selectPeople[i].id;
                        }
                    }
                    
                    localStorage.setItem("selectInfo",str);
                    localStorage.setItem("selectInfoCode",code);
                    this.goBack();
                } else {
                    Toast("至少选择一项");
                }
                console.log("选择内容："+this.selectPeople);
            },
            goBack() {
                //点击后退
                this.$router.go(-1);
            },
            checkItem(index) {//展开或折叠面板
                this.$set(this.isOpenItem[index], 'group', !this.isOpenItem[index].group);
            },
            checkSecondItem(firstIndex, secondIndex) {//展开或折叠第二层面板
                this.$set(this.isOpenItem[firstIndex].child, secondIndex, !this.isOpenItem[firstIndex].child[secondIndex]);
            },
            checkAll(index) {//第一层级的全选操作
                this.$set(this.isSelectAll[index], 'group', !this.isSelectAll[index].group);//改变当前按钮的选中状态
                if (!this.jobList[index].member && !this.jobList[index].son) {
                    return
                }
                if (!this.isSelectAll[index].group) {// 从全选 =》 全不选
                    for (let key in this.isSelectAll[index].child) { // 移除所有第二层级子项的选中状态
                        this.$set(this.isSelectAll[index].child, key, false);
                    }
                    for (let i = 0, len = this.selectPeople.length; i < len; i++) {
                        if (!this.selectPeople[i]) { //删除干净了
                            return
                        }
                        for (let k in this.jobList[index].son) {//循环删除有部门的人员（对应列表第三层级）
                            for (let j in this.jobList[index].son[k].member) {
                                if (this.selectPeople[i] && this.selectPeople[i].id == this.jobList[index].son[k].member[j].id) {
                                    this.selectPeople.splice(i, 1);
                                    i--;
                                    break;
                                }
                            }
                        }
                        for (let j in this.jobList[index].member) {//循环删除没有部门的人员（对应列表第二层级）
                            if (this.selectPeople[i] && this.selectPeople[i].id == this.jobList[index].member[j].id) {
                                this.selectPeople.splice(i, 1);
                                i--;
                                break;
                            }
                        }
                    }
                } else {// 从全不选 =》 全选
                    for (let key in this.isSelectAll[index].child) { // 给所有第二层级子项添加选中状态
                        this.$set(this.isSelectAll[index].child, key, true);
                    }
                    for (let i in this.jobList[index].member) {//循环添加没有部门的人员（对应列表第二层级）
                        if (this.selectPeople.includes(this.jobList[index].member[i])) { //如果已经存在，就不用再进行添加
                            continue;
                        }
                        this.selectPeople.push(this.jobList[index].member[i]);
                    }
                    for (let i in this.jobList[index].son) {//循环添加有部门的人员（对应列表第三层级）
                        for (let j in this.jobList[index].son[i].member) {
                            if (this.selectPeople.includes(this.jobList[index].son[i].member[j])) { //如果已经存在，就不用再进行添加
                                continue;
                            }
                            this.selectPeople.push(this.jobList[index].son[i].member[j]);
                        }
                    }
                }
            },
            checkSecondAll(index, secondIndex) {//第二层级的全选操作
                this.$set(this.isSelectAll[index].child, secondIndex, !this.isSelectAll[index].child[secondIndex]);//改变当前按钮的选中状态
                let members = this.jobList[index].son[secondIndex].member;//当前选项的所有成员
                if (!members) {
                    return
                }
                if (!this.isSelectAll[index].child[secondIndex]) {// 从全选 =》 全不选
                    this.$set(this.isSelectAll[index], 'group', false);//改变顶级按钮的选中状态为非选中状态
                    for (let i = 0, len = this.selectPeople.length; i < len; i++) {
                        if (!this.selectPeople[i]) { //删除干净了
                            return
                        }
                        for (let j in members) {//循环删除当前部门的所有人员（对应列表第三层级）
                            if (this.selectPeople[i].id == members[j].id) {
                                this.selectPeople.splice(i, 1);
                                i--;
                                break;
                            }
                        }
                    }
                } else {// 从全不选 =》 全选
                    for (let j in members) {//循环添加当前部门的所有人员（对应列表第三层级）
                        if (this.selectPeople.includes(members[j])) { //如果已经存在，就不用再进行添加
                            continue;
                        }
                        this.selectPeople.push(members[j]);
                    }
                    this.setFirstLevelChecked(index);
                }
            },
            setHeadColor(data, headColor) {//设置头像背景颜色
                let length = headColor.length;
                for (let i in data) {
                    //添加headColor属性
                    this.$set(data[i], 'headColor', headColor[Math.floor(Math.random() * length)]);
                }
            },
            stateChanged(index, i, j) {
                if (j !== undefined) { //如果有j值，代表第三层级数据
                    if (this.selectPeople.includes(this.jobList[index].son[i].member[j])) {//点击之前为选中状态
                        this.$set(this.isSelectAll[index].child, i, false);//改变父级按钮的选中状态为非选中状态
                        this.$set(this.isSelectAll[index], 'group', false);//改变顶级按钮的选中状态为非选中状态
                    } else {//点击之前为非选中状态
                        //给父级添加选中状态
                        for (let k = 0; k < this.jobList[index].son[i].member.length; k++) {
                            if (!this.selectPeople.includes(this.jobList[index].son[i].member[k]) && this.jobList[index].son[i].member[k] != this.jobList[index].son[i].member[j]) {//只要有其中一个未选中，就跳出循环，不给父级添加选中状态
                                return false
                            }
                        }
                        this.$set(this.isSelectAll[index].child, i, true);//改变父级按钮的选中状态为选中状态
                        this.setFirstLevelChecked(index, this.jobList[index].son[i].member[j]);//给第一级添加选中状态
                    }
                } else {//没有j值，第二层级数据
                    if (this.selectPeople.includes(this.jobList[index].member[i])) {//点击之前为选中状态
                        this.$set(this.isSelectAll[index], 'group', false);//改变父级按钮的选中状态为非选中状态
                    } else {//点击之前为非选中状态
                        this.setFirstLevelChecked(index, this.jobList[index].member[i]);//给第一级添加选中状态
                    }
                }
            },
            setFirstLevelChecked(index, data) {//给第一级添加选中状态
                for (let k in this.jobList[index].member) {
                    if (!this.selectPeople.includes(this.jobList[index].member[k]) && data != this.jobList[index].member[k]) {//只要有其中一个未选中，就跳出循环，不给父级添加选中状态
                        return false
                    }
                }
                for (let i in this.jobList[index].son) {//循环添加有部门的人员（对应列表第三层级）
                    for (let j in this.jobList[index].son[i].member) {
                        if (!this.selectPeople.includes(this.jobList[index].son[i].member[j]) && data != this.jobList[index].son[i].member[j]) { //如果已经存在，就不用再进行添加
                            return false
                        }
                    }
                }
                this.$set(this.isSelectAll[index], 'group', true);//改变第一级按钮的选中状态为选中状态
            },
            initData() {//数据初始化
                //设置头像背景颜色
                let len = this.jobList.length;
                for (let i = 0; i < len; i++) {
                 //this.setHeadColor(this.jobList[i].member, this.headColor);
                    //根据数据初始化全选按钮状态
                    this.isSelectAll.push([]);
                    this.$set(this.isSelectAll[i], 'group', false);
                    this.$set(this.isSelectAll[i], 'child', []);
                    //根据数据初始化折叠面板折叠状态
                    this.isOpenItem.push([]);
                    this.$set(this.isOpenItem[i], 'group', false);
                    this.$set(this.isOpenItem[i], 'child', []);
                    //设置第二层级的状态
                    for (let j in this.jobList[i].son) {
                        this.isSelectAll[i].child.push(false)
                        this.isOpenItem[i].child.push(false)
                        ///this.setHeadColor(this.jobList[i].son[j].member, this.headColor);
                    }
                }
            }
        }
    }
</script>
<!--
<style lang="stylus" scoped>
   

    .wrapper {
        padding-bottom: px2vw(90px)
    }

    .item_first {
        borderBottom()
    }

    .item {
        display flex
        fontSize(34px)
        paddingAround()
        .iconfont {
            fontSize(44px)
        }
    }

    .item_second li {
        display: flex
        align-items center
        borderTop()
        paddingAround()
        padding-left px2vw(45px)
        .content-wrap {
            display: flex;
            width: 100%
            .item_img {
                display flex
                justify-content center
                align-items center
                width: px2vw(90px)
                height: px2vw(90px)
                border-radius: 50%
                margin-left px2vw(20px)
                margin-right px2vw(15px)
                color: #fff
                text-align: center
            }
            .content {
                .content_name {
                    font-weight: bold
                }
                .vice {
                    color: vice-font-color
                }
            }

        }

    }

    .item_second label {
        flex 1
    }

    .item_third {
        borderTop()
    }

    .item_third .item {
        margin-left px2vw(15px)
    }

    .item_fourth > li {
        padding-left px2vw(90px)
    }

    .icon-gouxuan {
        color: main-color
    }

    .icon-checkboxround0 {
        color: vice-font-color
    }

    .checkGroup {
        width px2vw(60px)
        display inline-block
    }

    .head_img {
        width: px2vw(100px)
        height: px2vw(100px)
        border-radius 50%
        margin-left px2vw(15px)
        margin-right px2vw(15px)
    }

    input[type='checkbox'] {
        width: px2vw(44px);
        height: px2vw(44px);
        -webkit-appearance: none;
        background: url("./images/checkbox_round.png") no-repeat center;
        background-size px2vw(44px) px2vw(44px)
        outline: none;
    }

    input[type='checkbox']:checked {
        background: url("./images/checkbox_check.png") no-repeat center;
        background-size px2vw(44px) px2vw(44px)
    }
</style>--!>
